<template>

  <div id = "teamPage">
    <van-search v-model="searchText" placeholder="搜索队伍" clearable="true" @search="onSearch"/>
    <team-card-list :team-list="teamList"/>
    <van-empty v-if="teamList.length < 1" description="数据为空"/>
  </div>

</template>

<script setup lang="ts">


import {useRouter,useRoute} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {showFailToast} from "vant";
import {getCurrentUser} from "../services/user.ts";
const router = useRouter();
const searchText  = ref('');
const route  = useRoute();
const teamList  = ref([]);


//页面加载时只触发一次
onMounted(async() => {
  const userId  =  route.query.userId;
  if(userId){
    listTeam(searchText.value, userId as number);
  }else{
    const  res = await  getCurrentUser();
    listTeam(searchText.value, res.id as number);
  }

})


const onSearch = (async() =>{

  const userId  =  route.query.userId;
  if(userId){
    listTeam(searchText.value, userId as number);
  }else{
    const  res =  await getCurrentUser();
    listTeam(searchText.value, res.id as number);
  }
})

/**
 * 搜索队伍
 * @param val
 * @returns {Promise<void>}
 */
const listTeam = async (searchText:string = '',userId : number ) => {
  const res = await myAxios.get("/team/list/join", {
    params: {
      searchText: searchText,
      pageNum: 1,
      userId: userId,
    },
  });
  if (res?.code === 0) {
    teamList.value = res.data;
  } else {
    showFailToast('加载队伍失败，请刷新重试');
  }
}





</script>

<style scoped>

</style>